<template>
	<view class="category-box">
		<!-- slice(开始下标，结束下标) 返回指定范围的元素，注意：包头不包尾 -->
		<!-- <view v-for="(item, index) in categoryList.slice(0, 7)" :key="index"
			@click="toPageSearch(categoryList[index].id, categoryList[index].name, index)"
		>
			{{item.name}}
		</view>
		<view @click="toPageSearch(null, '全部分类', -1)" >全部分类</view> -->
		<view @click="tptabUrl(`/pages/mycon/list`)" class="center column">
			<view>
				<image class="cate-img" src="/static/images/icon_1@3x.png"></image>
			</view>
			<text class="cate-text">我要咨询</text>
		</view>

		<view @click="tptabUrl(`/pages/warmcare/info`)"  class="center column">
			<view>
				<image class="cate-img" src="/static/images/icon_2@3x.png"></image>
			</view>
			<text class="cate-text">温馨陪护</text>
		</view>

		<view @click="navTo(`/pages/ggb/info`)" class="center column">
			<view>
				<image class="cate-img" src="/static/images/icon_3@3x.png"></image>
			</view>
			<text class="cate-text">优生优育</text>
		</view>

		<view @click="tptabUrl(`/pages/fetation/index`)" class="center column">
			<view>
				<image class="cate-img" src="/static/images/icon_4@3x.png"></image>
			</view>
			<text class="cate-text">备孕助手</text>
		</view>

		<view v-if="jbstate==1" @click="navTo(`/pages/vip/info`)" class="center column">
			<view>
				<image class="cate-img" src="/static/images/icon_5@3x.png"></image>
			</view>
			<text class="cate-text">开通VIP</text>
		</view>



	</view>
</template>

<script>
	export default {
		props: {
			jbstate:'',
			categoryList: { // 分类数据
				type: Array,
				default: () => [{
						id: 1,
						name: 'java'
					},
					{
						id: 2,
						name: '运维'
					},
					{
						id: 3,
						name: 'Python'
					},
					{
						id: 4,
						name: 'UI设计'
					},
					{
						id: 5,
						name: '大数据'
					},
					{
						id: 6,
						name: '前端'
					},
					{
						id: 7,
						name: 'PHP'
					},
					{
						id: 8,
						name: 'VUE'
					},
				]
			}
		},

		methods: {
			// 跳转到搜索页
			toPageSearch(id, name, index) {
				console.log('id', id)
				const params = {
					categoryId: id,
					name: name,
					activeIndex: index
				}
				this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
			},

			tptabUrl(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.category-box {
		display: flex;
		justify-content: space-around;
		// 不行显示不下，自动换行
		flex-wrap: wrap;
		// 上 右 下 左
		padding: 20rpx 30rpx 0 30rpx;

		.cate-img {
			width: 104rpx;
			height: 104rpx;
		}

		.cate-text {
			width: 100rpx;
			height: 22rpx;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			line-height: 22rpx;
			text-align: center;
		}

	}
</style>
